// 导入获取菜单接口
import {getMenuList} from '../api/user'
import { createSlice } from "@reduxjs/toolkit";
import LazyLoad from '../utils/LazyLoad';
import type { MenuItem,UserInfoType } from '../types/index';
// state数据类型
interface StateType {
  userInfo:UserInfoType,
  menuList:MenuItem[],
  routeList:RouteListType[]
}
// 定义初始状态
const initialState:StateType = {
  userInfo:{name:"",avatar:""},//用户信息
  menuList:[
    // {label:'首页',key:"/dash"},
    // {label:'商品',key:"/product",children:[
    //   {label:'品类管理',key:"/category"},
    //   {label:'商品管理',key:"/product2"}
    // ],},

  ],//菜单列表
  routeList:[
    // 写死路由配置
    // {path:'dash',element:LazyLoad('views/admin/DashView')},
  ],//路由列表
}
// 定义切片
const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    // 设置用户信息
    setUserInfo(state,action){
      state.userInfo = action.payload
    },
    // 设置菜单列表
    setMenuList(state,action){
      state.menuList = action.payload
    },
    // 设置路由列表
    setRouteList(state,action){
      // console.log("设置路由列表",action.payload)
      state.routeList = action.payload
    }
  }
})
// 导出切片
export default authSlice.reducer
// 导出action
export const {setUserInfo,setMenuList,setRouteList} = authSlice.actions
// 导出异步获取并存储菜单方法
export const getMenu = () => async (dispatch:any) => {
  const res = await getMenuList()
  console.log("拿到的菜单数据",res.data)
  // 映射出需要的格式
  var menulist = mapToMenuList(res.data.list)
  // 更新菜单列表
  dispatch(setMenuList(menulist))
  var routeList = mapToRouteList(res.data.list)
  // console.log("映射后的路由列表",routeList)
  // 更新路由
  dispatch(setRouteList(routeList))
}
// 元数据类型
interface MenuListType {
  name:string,
  path:string,
  children:MenuListType[],
  component:string
}

// 定义一个方法mapToMenuList，用来将后台返回的菜单数据转换成我们需要的格式
function mapToMenuList(list:MenuListType[]):MenuItem[]{
  // 定义一个空数组 （默认被返回的数据）
  var arr:MenuItem[] = []
  // 遍历传入参数list
  for(var i=0;i<list.length;i++){
    // 将每一项数据转换成我们需要的格式
    arr[i] = {label:list[i].name,key:list[i].path}
    // 如果有子菜单
    if(list[i].children){
      // 递归调用（子菜单结果，是通过递归调用mapToMenuList，传入原数据 list[i].children 得到映射结果
      arr[i].children = mapToMenuList(list[i].children)
    }
  }
  // 返回映射结果
  return arr;
}
// 定义路由类型
interface RouteListType {
  path:string,
  element:JSX.Element
}
// 定义映射路由的方法
function mapToRouteList(list:MenuListType[]):RouteListType[]{
  // {path:"/dash",element:LazyLoad('views/admin/DashView')},
  var arr:RouteListType[] = []
  for(var i=0;i<list.length;i++){
    // 如果有子菜单，他不是一个路由，而是一个菜单
    if(list[i].children){
      // 递归映射子路由
      arr = arr.concat(mapToRouteList(list[i].children))
    }else{
      // console.log('views'+list[i].component.slice(0,-4),"加载地址")
      // 如果没有children 本身就应该被当做一个路由
      arr.push({path:list[i].path.slice(7),element:LazyLoad('views'+list[i].component.slice(0,-4))})
    }
  }
  return arr
}
